In this tutorial, I will explain how to integrate Google Maps within your MVC application using vb.net and C#. As an example we will use three US cities as an example:
- Nashville, TN
- Detroit, MI
- Los Angeles, CA
So let’s get started by creating the Database table as shown below.
DesignView
SQL
CREATE TABLE [dbo].[Locations] ( [Id] INT NOT NULL PRIMARY KEY, [CityName] NVARCHAR(100) NULL, [Latitude] NUMERIC(18, 6) NULL, [Longitude] NUMERIC(18, 6) NULL, [Description] NVARCHAR(100) NULL )
Add the data to the table.
Now create a new MVC web application. Add the following namespace to the HomeController:
C#
using System.Data.SqlClient; using System.Configuration;
VB.NET
Imports System.Data.SqlClient Imports System.Configuration
Google maps require an array of Markers which contains the city name, latitude, longitude, and description. The code below will generate a marker then assign its value to the ViewBag object.C#
C#
public ActionResult Index() { string markers = "["; string strConn = "Data Source=TutorialsPanel-PC\SQLEXPRESS;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False"; SqlCommand cmd = new SqlCommand("SELECT * FROM Locations"); using (SqlConnection conn = new SqlConnection(strConn)) { cmd.Connection = conn; conn.Open(); using (SqlDataReader reader= cmd.ExecuteReader()) { while (reader.Read()) { markers += "{"; markers += string.Format("'title': '{0}',", reader["CityName"]); markers += string.Format("'lat': '{0}',", reader["Latitude"]); markers += string.Format("'lng': '{0}',", reader["Longitude"]); markers += string.Format("'description': '{0}'", reader["Description"]); markers += "},"; } } conn.Close(); } markers += "];"; ViewBag.Markers = markers; return View(); }
VB.NET
Public Function Index() As ActionResult Dim markers As String = "[" Dim strConn As String = "Data Source=TutorialsPanel-PC\SQLEXPRESS;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False" Dim cmd As New SqlCommand("SELECT * FROM Locations") Using conn As New SqlConnection(strConn) cmd.Connection = conn conn.Open() Using reader As SqlDataReader = cmd.ExecuteReader() While sdr.Read() markers += "{" markers += String.Format("'title': '{0}',", reader("CityName")) markers += String.Format("'lat': '{0}',", reader("Latitude")) markers += String.Format("'lng': '{0}',", reader("Longitude")) markers += String.Format("'description': '{0}'", reader("Description")) markers += "}," End While End Using conn.Close() End Using markers += "];" ViewBag.Markers = markers Return View() End Function
Now let’s move to the view of our application. We will use the Index View to render our maps.
Note: to use the Google Maps API; you need to obtain an API key. Click here for more information about how to get a Google maps API.
HTML
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Google Maps Layout</title> </head> <body> <div id="Map" style="width: 800px; height: 800px"> </div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=yourKey"></script> <script type="text/javascript"> var markers = @Html.Raw(ViewBag.Markers); window.onload = function () { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("Map"), mapOptions); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); (function (marker, data) { google.maps.event.addListener(marker, "click", function (e) { infoWindow.setContent(data.description); infoWindow.open(map, marker); }); })(marker, data); } } </script> </body> </html>
Now run the application.
Comments